<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/element-ui/element-ui@2.9.1.css" />
    <!-- 先引入 Vue -->
    <script src="/static/element-ui/vue@2.6.10.js"></script>
    <!-- 引入组件库 -->
    <script src="/static/element-ui/element-ui@2.9.1.js"></script>
    <script src="/static/element-ui/axios@0.18.0.min.js"></script>
    <script src="/static/js/jquery@3.4.1.min.js"></script>
    <script src="/static/js/jquery.cookie@1.4.1.min.js"></script>
    <script src="/static/js/rules.js"></script>

    <style>
      .el-main a {
        text-decoration: none;
        color: #333;
      }

      body {
        width: 600px;
      }

      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <el-container>
      <div id="app">
        <el-breadcrumb separator="/">
          <template v-for="item in navs">
            <el-breadcrumb-item
              ><a :href="item.url">{{ item.name }}</a></el-breadcrumb-item
            >
          </template>
        </el-breadcrumb>

        <el-header>
          <h2>{{ title }}</h2>
        </el-header>

        <el-main>
          <!-- 添加任务表单开始 -->
          <template>
            <el-form
              ref="form"
              :model="formData"
              label-width="100px"
              size="medium"
              :rules="rules"
            >
              <el-form-item label="服务器" prop="server_name">
                <el-input v-model="formData.server_name" disabled></el-input>
              </el-form-item>
              <el-form-item label="项目" prop="project_name">
                <el-input v-model="formData.project_name" disabled></el-input>
              </el-form-item>
              <el-form-item label="爬虫" prop="spider_name">
                <el-input v-model="formData.spider_name" disabled></el-input>
              </el-form-item>

              <el-form-item label="定时类型">
                <el-select
                  v-model="formData.trigger"
                  @change="changeTrigger"
                  placeholder="请选择定时类型"
                >
                  <el-option
                    v-for="item in triggers"
                  addServer  :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <div class="cron">
                <el-form-item label="crontab">
                  <el-input
                    v-model="formData.cron"
                    placeholder="* * * * *"
                  ></el-input>
                </el-form-item>
              </div>

              <div class="interval hide">
                <el-form-item label="时间间隔">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="单位: 分钟"
                    placement="right"
                  >
                    <el-input-number
                      v-model="formData.interval"
                      controls-position="right"
                      :min="1"
                    ></el-input-number>
                  </el-tooltip>
                </el-form-item>
              </div>

              <div class="random hide">
                <el-form-item label="随机时间间隔">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="单位: 分钟"
                    placement="top"
                  >
                    <el-slider
                      v-model="random_arr"
                      range
                      show-stops
                      :min="1"
                      :max="60"
                    >
                    </el-slider>
                  </el-tooltip>
                </el-form-item>
              </div>

              <div class="date hide">
                <el-form-item label="执行时间">
                  <el-date-picker
                    v-model="formData.run_datetime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>

              <el-form-item>
                <el-button type="info" @click="cancel">取消</el-button>
                <el-button type="primary" @click="addJob">确定</el-button>
              </el-form-item>
            </el-form>
          </template>
          <!-- 添加任务表单结束 -->
        </el-main>
      </div>
    </el-container>
  </body>

  <script>
    var app = new Vue({
      el: "#app",
      mixins: [rules],
      data: {
        title: "添加任务",
        formData: {},
        navs: [
          {
            name: "任务列表",
            url: "/scheduler-vue",
          },
          {
            name: "修改任务",
            url: "/scheduler-modify-vue",
          },
        ],
        triggers: [
          {
            value: "date",
            label: "单次任务",
          },
          {
            value: "cron",
            label: "周期任务",
          },
          {
            value: "interval",
            label: "间隔任务",
          },
          {
            value: "random",
            label: "随机任务",
          },
        ],
        random_arr: [10, 60],
      },

      watch: {
        random_arr: function (val) {
          this.formData.random = val[0] + "-" + val[1];
        },
      },

      methods: {
        jobDetail: function (job_id) {
          axios
            .get("/scheduler/jobDetail", {
              params: {
                job_id: job_id,
              },
            })
            .then((response) => {
              this.title = "修改任务";
              this.formData = response.data;
              this.changeTrigger();
            });
        },

        initFormData: function () {
          var job_id = $.cookie("job_id");

          console.log("job_id: " + job_id);

          // 如果有job_id 就是修改，那么先去服务端取最新数据
          if (job_id !== undefined) {
            this.jobDetail(job_id);
          }
          // 添加数据
          else {
            this.formData = {
              server_name: $.cookie("server_name"),
              server_host: $.cookie("server_host"),
              project_name: $.cookie("project_name"),
              spider_name: $.cookie("spider_name"),
              trigger: "cron",
              cron: "* * * * *",
              run_datetime: this.getDatetime(),
              interval: 3,
              random: "10-60",
            };
          }
        },

        getDatetime: function () {
          var d = new Date();
          var year = d.getFullYear();
          var month = change(d.getMonth() + 1);
          var day = change(d.getDate());
          var hour = change(d.getHours());
          var minute = change(d.getMinutes());
          var second = change(d.getSeconds());

          function change(t) {
            if (t < 10) {
              return "0" + t;
            } else {
              return t;
            }
          }

          var time =
            year +
            "-" +
            month +
            "-" +
            day +
            " " +
            hour +
            ":" +
            minute +
            ":" +
            second;
          return time;
        },

        cancel: function () {
          window.location.href = "/scheduler-vue";
        },

        addJob: function () {
          axios.post("/scheduler/addJob", this.formData).then((response) => {
            $.cookie("job_id", response.data.job_id);
            this.jobDetail(response.data.job_id);
            this.$message({
              type: response.data.message_type,
              message: response.data.message,
            });
            setTimeout(() => {
              this.cancel();
            }, 2000);
          });
        },

        changeTrigger: function () {
          console.log(this.formData.trigger);
          // 隐藏所有分类
          for (var index in this.triggers) {
            var trigger = this.triggers[index];
            $(`.${trigger.value}`).addClass("hide");
          }
          // 显示选中分类
          $(`.${this.formData.trigger}`).removeClass("hide");
        },
      },
      created() {
        this.initFormData();
      },
    });
    window.app = app;
  </script>
</html>
